import React, { Component } from "react";
// import React, { PureComponent } from "react";

import Child from "./Child";

// 只有类组件可以有生命周期
class App extends Component {
  //! 初始化阶段
  // constructor会在实例被创建的时候立马执行,所以constructor就是类组件的第一个生命周期
  constructor(props) {
    // constructor一般就是做定义state，ref，改变事件的this指向等
    // constructor可以接收一个参数是props
    super();
    console.log("constructor");
    this.state = {
      name: "zhangsan",
      age: 20,
      list: [],
    };

    // this.ipt = createRef();
    // this.fn = this.fn.bind(this);
  }

  //! 挂载阶段
  // componentWillMount被废弃了,现在要用需要加UNSAFE_
  // UNSAFE_componentWillMount表示挂载前，相当于vue的beforeMount
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // 可以在这里修改，但是没意义
    // this.setState({
    //   name: "lisi",
    // });
    // 在这里是不能请求数据的
    // 在16版的时候，react新增了一个Fiber算法
    // 当一个组件渲染或者更新的时候，都需要做一系列的事情
    // 如果组件非常的大，所需的时间就会很长，js又是单线程并同步执行这些事情
    // 导致项目的卡顿
    // Fiber算法就是用来解决这个卡顿的
    // Fiber算法将大任务拆分成诺干个小任务，一个一个的执行
    // 当执行一个一个小任务的间隙就有机会执行其他任务了

    // 大任务（从开始渲染到所有的渲染结束）
    // 有一定几率会使请求发送多次

    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
  }

  fn = () => {
    this.setState({
      // age: this.state.age + 1,
      age: 20,
    });
  };

  // render就是挂载阶段的一个生命周期
  // 每个类组件都必须要有render函数，render函数还必须要return一段jsx代码
  // render里面是不能请求数据的，无限次请求
  // render里面一般也就去解构数据和处理数据
  render() {
    console.log("render");
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //     this.setState({
    //       list: res.result,
    //     });
    //   });

    const { name } = this.state;
    // const { a } = this.props;

    return (
      <>
        <h2>旧版的生命周期(16.3版本之前)</h2>
        <p>name: {name}</p>
        {/* <ul>
          {list.map((item) => (
            <li key={item._id}>{item.title}</li>
          ))}
        </ul> */}

        <p>age: {this.state.age}</p>
        <button onClick={this.fn}>btn</button>

        <hr />

        <Child name="lisi" />
      </>
    );
  }

  // 相当于vue的mounted
  // 数据请求和获取dom只能在这里做
  // 其他的事情也都能做
  componentDidMount() {
    console.log("componentDidMount");
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     console.log(res);
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
  }

  //! 更新阶段
  // 询问组件是否要更新
  // 必须要返回true或者false来判断组件是否要更新
  // 里面又有两个参数nextProps, nextState表示新的props和新的state
  // 用于做性能优化的
  // shouldComponentUpdate(nextProps, nextState) {
  //   console.log("shouldComponentUpdate");
  //   return nextState.age !== this.state.age;
  // }

  // UNSAFE_componentWillUpdate也是被废弃了
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  // 相当于vue的updated
  // 不能再这里修改数据
  componentDidUpdate() {
    console.log("componentDidUpdate");
    // this.setState({
    //   age: this.state.age + 1,
    // });
  }

  //! 卸载阶段
  // 这里需要清除定时器，断开websocket长连接，原生js的事件监听，销毁map或者echarts等第三方实例
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
}

export default App;
